<template>
    <detail-page>
        <div class="title">信息提交</div>
        <div class="form-list">
            <x-input label="请输入姓名：" v-model="params.name"></x-input>
            <x-input label="请输手机号：" class="input-phone" v-model="params.phone"></x-input>
            <div class="code-wapper">
                <x-input label="请输验证码：" v-model="params.code" class="input-code"></x-input>
                <div class="code-btn" @click="getCode">{{codeTick==0? '获取验证码':codeTick+'s后再获取'}}</div>
            </div>
        </div>
        <div class="btn" @click="submit"></div>
        <!-- <loading text="报名处理中" :visual = "loading"></loading> -->
        <x-dialog class="success-dlg" :visual.sync = "dialogVisual2" :closeable="false">
            <div class="content">
                <div><span class="bold">您已成功报名【9.1里山电影节】</span></div>
                <div>
                    <span class="blud">{{awardResult.createTimeStr}} </span><span>在</span><span class="blud">{{awardResult.cinemaName}}</span>的万人观影活动，兑换码为<span class="blud">{{awardResult.vcode}}</span>，
                    <span class="warn">请您务必在开场前20分钟到达{{awardResult.cinemaName}}影城</span>，凭兑换码与手机号至签到处换票入场，祝您观影愉快。
                </div>
                <div class="share-text">转发至朋友圈   邀请你的朋友一起观影</div>
            </div>
            <div @click="dialogVisual2=false" class="close-btn"></div>
        </x-dialog>
        <x-dialog class="success-dlg award-dlg" :visual.sync = "dialogVisual3" :closeable="false">
            <div class="content">
                <div>
                    您已成功抽中【源溪里山】选出的<span class="blud"> （{{awardResult.prizeName}}）</span>，兑换码为<span class="blud">{{awardResult.vcode}}</span>，请于<span class="blud">{{awardResult.createTimeStr}}</span>前至城市展厅（五四路82号融都国际大厦里山茶室），凭兑换码与手机号领取。
                </div>
                <br>
                <div class="share-text" >转发至朋友圈   邀请你的朋友一起观影</div>
            </div>
            <div @click="dialogVisual3=false" class="close-btn"></div>
        </x-dialog>
        <img src="~@/assets/6.jpg" height="0px">
        <transition name="fade">
            <div class="ad-plane full" v-if="adLastTime">
                <div class="last-time">{{adLastTime}}</div>
            </div>
        </transition>

        <transition name="fade">
            <div class="lucky-wheel-plane full" v-if="luckyShow">
                <lucky-wheel :reward-fun="draw" ref="luckyWheel" class="lucky-wheel" @end="luckyWheelEnd"></lucky-wheel>
            </div>
        </transition>
    </detail-page>
</template>

<script>
import XInput from '@/components/XInput'
import DetailPage from '@/components/DetailPage'
// import Loading from '@/components/Loading'
import XDialog from '@/components/XDialog'
import LuckyWheel from '@/components/LuckyWheel'
export default {
  components: {XInput, DetailPage, XDialog, LuckyWheel},
  data () {
    return {
      params: {

      },
      codeText: '获取验证码',
      codeTick: 0,
      loading: false,
      dialogVisual2: false,
      dialogVisual3: false,
      adLastTime: 0,
      luckyShow: false,
      awardResult: {}
    }
  },
  methods: {
    async getCode () {
      if (this.codeTick > 0) {
        return
      }
      if (!this.params.phone) {
        this.$alert.show('请输入手机号')
        return
      }
      if (!/^[1][0-9]{10}$/.test(this.params.phone)) {
        this.$alert.show('请输入1开头的11位手机号')
        return
      }

      await this.$request.post('/api_ygc/sendMCode', {phone: this.params.phone})
      this.codeTick = 30
      const inter = setInterval(() => {
        if (this.codeTick <= 0) {
          clearInterval(inter)
          this.codeTick = 0
          return
        }
        this.codeTick--
      }, 1000)
    },
    async draw () {
      return new Promise(async (resolve, reject) => {
        let params = Object.assign({}, this.params)
        params.channel = this.$route.query.channel
        params.hallId = this.$route.query.hallId
        try {
          this.awardResult = await this.$request.post('/api_ygc/draw', params)
          // this.awardResult.type = Math.round(Math.random() * 5 + 1)
          this.awardResult.prizeId--
          resolve(this.awardResult.prizeId)
        } catch (error) {
          reject(error)
        }
      })
    },
    async submit () {
      if (!this.params.name) {
        this.$alert.show('请输入姓名')
        return
      }
      if (!this.params.phone) {
        this.$alert.show('请输入手机号')
        return
      }
      if (!/^[1][0-9]{10}$/.test(this.params.phone)) {
        this.$alert.show('请输入1开头的11位手机号')
        return
      }
      if (!this.params.code) {
        this.$alert.show('请输入验证码')
        return
      }
      await this.$request.post('/api_ygc/check', this.params)
      this.adLastTime = 3
      const inter = setInterval(() => {
        this.adLastTime--
        if (this.adLastTime <= 0) {
          clearInterval(inter)
          this.luckyShow = true
          this.adLastTime = 0
        }
      }, 1000)
    },
    luckyWheelEnd () {
      if (this.awardResult.prizeId === 3) { this.dialogVisual2 = true } else { this.dialogVisual3 = true }
    }
  }
}
</script>

<style scoped lang="scss">
.title{
    color:#333333;
    font-size: 38px;
    text-align: center;
    position: absolute;
    top:378px;
    width: 100%;
    letter-spacing: 4px;
}
.form-list{
    position: absolute;
    top:463px;
    left:145px;
    width:483px;
    .input-phone{
        margin: 14px 0px;
    }
    .code-wapper{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .input-code{
            width: 299px;
        }
        .code-btn{
            width: 184px;
            height: 75px;
            background-color: #ff9c4b;
            border-radius: 10px;
            margin-left: 20px;
            color: #ffffff;
            font-size: 24px;
            line-height: 75px;
            text-align: center;
        }
    }
    .form-btn{

    }
}
.btn{
    background-image: url('~@/assets/7.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 271px;
    height: 84px;
    position: absolute;
    top:864px;
    left:248px;
}
.content{
    line-height: 38px;
    font-size: 26px;
    height: 240px;
    padding: 0px 20px 0px 20px;
}
.bold{
    font-weight: bold;
}
.warn{
    color:#f44335;
}
.blud{
    color: #159eec;
}
.share-text{
    color: #333333;
    font-size: 30px;
    font-weight: bold;
    margin-top: 10px;
}
.ad-plane{
    background-image: url('~@/assets/6.jpg');
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #3f3e43;
}
.close-btn{
    position: absolute;
    background-image: url('~@/assets/close.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 66px;
    width: 66px ;
    top:460px ;
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
}
.last-time{
    color:#fff;
    font-size: 40px;
    border:1px solid #fff;
    border-radius: 50%;
    top:40px;
    right:40px;
    position: absolute;
    background-color: rgba(0, 0, 0, .4);
    z-index: 20;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
}
.lucky-wheel-plane{
    background-image: url('~@/assets/bg.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #cb163d;
    .lucky-wheel{
        top:419px;
        left: 120px;
    }
}
</style>
<style lang="scss">
.success-dlg{
     .x-dialog{
        background-color: transparent !important;
        box-shadow:none !important;
        background-image: url('~@/assets/bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .body{
            overflow: visible !important;
        }
     }
    .mask{
        background-image: url('~@/assets/bk-1.jpg') ,url('~@/assets/bk-2.jpg') ;
        background-position: top center, bottom center;
        background-repeat: no-repeat,no-repeat;
        background-size: 100% auto,100% auto;
        background-color: #5c5b57 !important;
    }
}
.award-dlg .x-dialog{
    background-image: url('~@/assets/bg2.png');
}
</style>
